<template>
  <div class="wrap">
    <headerPrint :type="'PAY'+$route.query.type"/>
    <div  id="printWrapId" class="print">
      <p class="page-title">
        <span class="z">KONE ELEVATORS CO.,&nbsp;&nbsp;LTD.</span>
        <span class="f">Payment Request &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<strong>Ver. 2</strong></span>
      </p>
      <div class="head-info-wrap clear">
        <p>
          <span class="desc1">Yes</span>
          <span class="desc2">Payee's a/c detail:</span>
        </p>
        <table class="money-table" width="100%" align="center" cellpadding="0" cellspacing="0">
          <tr class="tr">
            <td style="font-weight: 600;">Check draft:</td>
            <td></td>
            <td class="no-btm-br">
              <div class="justify">转帐支票</div>
            </td>
            <td>
              <div class="radio-image">
                <img :src="isActiveCurrent(dp.payment,'Check draft') ? activeIconImage:defaultIconImage" alt="">
              </div>
            </td>
            <td class="no-btm-br"><span class="left-label" style="font-weight: 600;">Name: </span><span class="bold">{{ dp.payeeName }}</span>
            </td>
          </tr>
          <tr class="tr">
            <td style="font-weight: 600;">Cash check:</td>
            <td></td>
            <td  class="no-btm-br">
              <div class="justify">电汇</div>
            </td>
            <td>
              <div class="radio-image">
                <img :src="isActiveCurrent(dp.payment,'Cash check') ? activeIconImage:defaultIconImage" alt="">
              </div>
            </td>
            <td class="no-btm-br">
              <span class="left-label" style="font-weight: 600;">A/C code: </span>
              <span class="bold" style="display: inline-block; width: calc(100% - 56px); border-bottom: 1px solid #000">{{ dp.payeeCode }}</span>
            </td>
          </tr>
          <tr class="tr">
            <td style="font-weight: 600;">Remittance:</td>
            <td></td>
            <td  class="no-btm-br">
              <div class="justify">汇票</div>
            </td>
            <td>
              <div class="radio-image" >
                <img :src="isActiveCurrent(dp.payment,'Remittance') ? activeIconImage:defaultIconImage" alt="">
              </div>
            </td>
            <td class="no-btm-br"><span class="left-label" style="font-weight: 600;">Bank: </span><span class="bold">{{ dp.payeeBank }}</span>
            </td>
          </tr>
          <tr class="tr">
            <td style="font-weight: 600;">Petty Cash:</td>
            <td></td>
            <td  class="no-btm-br">
              <div class="justify">现金</div>
            </td>
            <td>
              <div class="radio-image">
                <img :src="isActiveCurrent(dp.payment,'Petty Cash') ? activeIconImage:defaultIconImage" alt="">
              </div>
            </td>
            <td class="no-btm-br"></td>
          </tr>
        </table>
        <div class="right-wrap">
          <ul>
            <li>
              <span style="font-weight: 600;">Apply Date:</span>
              <span class="ipt">{{ $moment(dp.createTime).format('YYYY/MM/DD') }}</span>
            </li>
            <li>
              <span style="font-weight: 600;">Date of receiving by V5:</span>
              <span class="ipt">{{ dp.receivingByV5 ? $moment(dp.receivingByV5).format('YYYY/MM/DD'):"" }}</span>
            </li>
            <li>
              <span style="font-weight: 600;">Required date:</span>
              <span class="ipt">{{ dp.requiredDate ? $moment(dp.requiredDate).format('YYYY/MM/DD'):"" }}</span>
            </li>
          </ul>
        </div>
      </div>
      <p class="c-text">Amount:</p>
      <div class="money-wrap">
        <div class="money-type">
          <div class="radio-image active">
            <img :src="activeIconImage" alt="">
          </div>
          RMB
          <br/>
          <div class="radio-image">
            <img :src="defaultIconImage" alt="">
          </div>
          Others
        </div>
        <div class="my-content">
          <div class="ctn-wrap">
            <ul>
              <li v-for="(value,index) in dp.dpAmountStr" :key="index"
                  :style="{borderLeft: index == 1 ? '#000 solid 2px !important' :
                  ((index - 1) % 3 === 0) ? '#000 solid 2px !important' :
                  (index ===  iotIndex) ? '#000 solid 2px !important' : ''}"
              >{{ value }}</li>
            </ul>
            <div class="p-t" style="font-weight: 600;">Paid to: <span class="bold">{{ dp.payedTo }}</span></div>
          </div>
          <div>
            <span class="ipt"></span>
            <span class="c-text">(Payee's name)</span>
          </div>
        </div>
      </div>
      <div class="dept-branch"  style="font-weight: 600;">
        Dept./Branch：
        <span class="ipt">{{ dp.departmentBranchOrgId }}</span>
      </div>
      <p class="c-text">Invoice attached after this page</p>
      <table class="invoice-attached" width="100%" align="center" cellpadding="0" cellspacing="0">
        <tr>
          <td colspan="24"><span class="label">Part A: Completion by Originator</span></td>
        </tr>
        <tr>
          <td colspan="24" style="height: 155px">
            <p>Descriptions</p>
            <p class="descText">{{ dp.dpDescription }}</p>
          </td>
        </tr>
        <tr class="">
          <td colspan="8" class="">
            <span style="display: block">Cost Center:</span>
            <span class="bold">{{ costCenter}}</span>
          </td>
          <td colspan="8">
            <span style="display: block">Project No.:</span>
            <span class="bold">{{info.projectId}}</span>
          </td>
          <td colspan="8">
            <span style="display: block">Project Name:</span>
            <template v-if="info.projectName">
              <span class="bold">{{ info.projectName }}</span>
            </template>
            <template v-else>
              <span class="bold" style="display: inline-block;"/>
            </template>
          </td>
        </tr>
        <tr>
          <td colspan="24" style="
           padding: 3px 0 !important;
           vertical-align: middle;">
            <span style="
            display: inline-block;
             text-align: left;
             width: 100%;
              padding-left: 5px;
             border-radius: unset !important;
             border-bottom: 2px solid #000 !important;
             border-top: 2px solid #000 !important;">
            Part B : Completion By Finance
           </span>
          </td>
        </tr>
        <tr>
          <td colspan="4" style="padding: 0 !important;">
            <div style="display: flex;justify-content: center;flex-direction: column;align-items: center;">
              <span style="width: 100%; text-align: center; border-bottom: 1px solid #000">Account Entry</span>
              <span style="width: 100%; text-align: center;">GL Account</span>
            </div>
<!--            <tr>Account Entry</tr>-->
<!--            <tr>GL Account</tr>-->
<!--            Account Entry-->
<!--            <div>GL Account</div>-->
          </td>
<!--          <td colspan="4">GL Account</td>-->
          <td colspan="6" style="text-align: center; vertical-align:middle;">Account Name</td>
          <td colspan="2" style="text-align: center; vertical-align:middle;" >BA</td>
          <td colspan="4" style="text-align: center; vertical-align:middle;">Dr（借）</td>
          <td colspan="4" style="text-align: center; vertical-align:middle;">Cr（贷）</td>
          <td colspan="4" style="text-align: center; vertical-align:middle;">Remark</td>
        </tr>
        <tr v-for="(item,index) in (dpList && dpList.length ? dpList : 10)"
            :key="index"
            class="list-item-text"
            style="height: 20px">
          <td colspan="4" :style="{ textAlign:'center', borderBottom: index < (dpList && dpList.length ? dpList.length - 1 : 9) ? '2px solid #BEBEBE !important' : ''}">
            {{ item.glAccount }}
          </td>
          <td colspan="6" :style="{ textAlign:'center',borderBottom: index < (dpList && dpList.length ? dpList.length - 1 : 9) ? '2px solid #BEBEBE !important' : ''}">{{ item.accountName }}</td>
          <td colspan="2" :style="{  textAlign:'center',borderBottom: index < (dpList && dpList.length ? dpList.length - 1 : 9) ? '2px solid #BEBEBE !important' : ''}">{{ item.ba }}</td>
          <td colspan="4" :style="{  textAlign:'center', borderBottom: index < (dpList && dpList.length ? dpList.length - 1 : 9) ? '2px solid #BEBEBE !important' : ''}">{{ item.dr }}</td>
          <td colspan="4" :style="{ textAlign:'center', borderBottom: index < (dpList && dpList.length ? dpList.length - 1 : 9) ? '2px solid #BEBEBE !important' : ''}">{{ item.cr }}</td>
          <td colspan="4" :style="{ textAlign:'center',borderBottom: index < (dpList && dpList.length ? dpList.length - 1 : 9) ? '2px solid #BEBEBE !important' : ''}">{{ item.remark }}</td>
        </tr>
        <tr>
          <td colspan="24" style="
           padding: 3px 0 !important;
           vertical-align: middle;">
            <span style="
            display: inline-block;
             text-align: left;
             width: 100%;
            padding-left: 5px;
             border-radius: unset !important;
             border-bottom: 2px solid #000 !important;
             border-top: 2px solid #000 !important;">
            <span style="display: inline-block;width: 300px;">Prepared By:</span>
            <span>Approved By:</span>
            </span>
          </td>
        </tr>
      </table>
      <table class="invoice-attached" width="100%" align="center" cellpadding="0" cellspacing="0"
             style="margin-top: 5px;">
        <tr>
          <td colspan="8">
            <span style="display: inline-block;width: 300px;">Apply by:</span>
            <div style="height: 50px;padding-top: 27px;">
<!--                <img height="40px" :src="getCurrentUser(userList,'PO_S')['signPath']" alt="">-->
                {{info['downPaymentDto'+this.type].preparedByName}}
            </div>
            <span>Date:{{info['downPaymentDto'+this.type].createTime}}</span>
          </td>
          <td colspan="8">
            <span style="display: inline-block;width: 300px;">Attested by:</span>
            <div style="height: 50px;"></div>
            <span>Date:</span>
          </td>
          <td colspan="8">
            <span style="display: inline-block;width: 300px;">Received by:</span>
            <div style="height: 50px;"></div>
            <span>Date:</span>
          </td>
        </tr>
      </table>
      <div class="manager">
        <div class="item">Requisitioner</div>
        <div class="item">Vertical Manager</div>
        <div class="item">Signature of the receiver</div>
      </div>
      <table class="invoice-attached" width="100%" align="center" cellpadding="0" cellspacing="0">
        <tr>
          <td colspan="16">
            <span style="display: inline-block;width: 300px;">Approved by:</span>
            <div style="height: 50px;text-align: center">
<!--              <img height="40px" :src="getCurrentUser(userList,'Financial Director')['signPath']" alt="">-->
<!--              <img height="40px" :src="getCurrentUser(userList,'Project HoD')['signPath']" alt="">-->
                <approvalSingleUser  style="margin-left: 10px;margin-top: 10px;" :list="info['dpApprovalInfos'+this.type]" progressCode="Financial Director"></approvalSingleUser>
                <approvalSingleUser style="margin-left: 10px;margin-top: 10px;" :list="info['dpApprovalInfos'+this.type]" progressCode="Project HoD"></approvalSingleUser>
            </div>

            <span>Date:{{getApprovalUserInfo(info['dpApprovalInfos'+this.type],'Financial Director')['createTime']}}</span>
          </td>
          <td colspan="8">


            <span style="display: inline-block;width: 300px;">Approved by:</span>
            <div style="height: 50px;text-align: center">
<!--                <img height="40px" :src="getCurrentUser(userList,'GM')['signPath']" alt="">-->
                <approvalSingleUser  style="margin-left: 10px;margin-top: 10px;" :list="info['dpApprovalInfos'+this.type]" progressCode="GM"></approvalSingleUser>
            </div>
            <span>Date:{{getApprovalUserInfo(info['dpApprovalInfos'+this.type],'GM')['createTime']}}</span>
          </td>
        </tr>
      </table>
      <div class="manager1">
        <div class="item">Vertical Director</div>
        <div class="item">Managing Director</div>
      </div>
    </div>
  </div>
</template>

<script>
import headerPrint from './header'
import mixins from "@/views/devBasic/capex/print/mixins";


import defaultIconImage from '@/assets/images/capex/r1.png'
import activeIconImage from '@/assets/images/capex/r.png'
import approvalSingleUser from "@/views/devBasic/capex/print/approvalSingleUser.vue";
export default {
  name: "downPayment",
  mixins:[mixins],
  components: {headerPrint,approvalSingleUser},
  data() {
    return {
      info: this.$store.state.capex['PAY' + this.$route.query.type+this.$route.query.id],
      dp: {},
      iotIndex:"",
      dpList: [],
      costCenter: "",
      userList:[],
      defaultIconImage,
      activeIconImage,
        type:""
    }
  },
  async mounted() {
    this.costCenter = this.info.capexCapitalizationInfoDTO.costCenter
    this.dp = this.info['downPaymentDto' + this.$route.query.type]
    const _type = this.$route.query.type / 1;
    this.type = _type
    let Dtype = 'Down Payment'
    let userList = []
    if (_type == 1) {
      Dtype = 'Down Payment'
       // userList  = await this.getApproval(this.info.id,['Down Payment','Down Payment Approval'])
    }
    if (_type == 2) {
      Dtype = '2nd Payment'
      // userList  = await this.getApproval(this.info.id,['2nd Payment','2nd Payment Approval'])
    }
    if (_type == 3) {
      Dtype = '3nd Payment'
      // userList  = await this.getApproval(this.info.id,['3nd Payment','3nd Payment Approval'])
    }
    // this.userList = userList
    this.dpList = this.info['downPaymentDetailDtos'].filter(item => item.processCode === Dtype)
   if (this.dpList.length < 10){
     for (let i = 0; i < 10 - this.dpList.length;) {
        this.dpList.push(i)
     }
   }
    if (this.dp && this.dp.dpAmount) {
      let dpAmount = String((this.dp.dpAmount / 1).toFixed(2)).split('')
      for (let i = 0; i < 13; i++) {
        if (dpAmount.length < i) {
          dpAmount.unshift('')
        }
      }
      this.dp.dpAmountStr = dpAmount
      this.iotIndex = dpAmount.findIndex(val=>val === '.')
    }

  },
  methods: {
    isActiveCurrent(str1, str2) {
      return str1 == str2
    },
  }
}
</script>

<style lang="scss" scoped>
@import "./style.scss";

.print {
  //padding: 0;
  //height: auto;
  padding: 40px;
}

.page-title {
  .z {
    font-weight: bold;
    font-size: 16px;
    display: block;
  }

  .f {
    font-size: 14px;
  }
}

.head-info-wrap {
  position: relative;

  .desc1 {
    font-size: 12px;
    width: 224px;
    text-align: right;
    display: inline-block;
    padding-right: 7px;
    font-weight: 600;
    box-sizing: border-box;
  }

  .desc2 {
    font-weight: 600;
    font-size: 12px;
    padding-left: 51px;
  }

  table {
    border-color: black !important;
    width: 490px;
    border: #000 solid 2px;
    //display: inline-block;
    vertical-align: bottom;

    tr {
      td {
        font-size: 12px;
        padding: 0 2px;
        border: #000 solid 2px;
        height: 20px;
        line-height: 18px;

        p, span {
          font-size: 12px;
        }

        &:nth-child(1) {
          width: 77px;
        }

        &:nth-child(2) {
          width: 17px;
        }

        &:nth-child(3) {
          width: 97px;
          text-align-last: justify;
          text-align: justify;
          text-justify: distribute-all-lines;
        }

        &:nth-child(4) {
          width: 33px;
          text-align: center;
        }

        &:nth-child(5) {

        }

        .radio-image {
          margin: 0 auto 0;
        }

        .left-label {
          display: inline-block;
          width: 56px;
        }

        &.no-btm-br {
          border: none;
        }

        .justify {
          width: 56px;
        }
      }
    }
  }

  .right-wrap {
    display: inline-block;
    width: calc(100% - 490px);
    position: absolute;
    right: 0;
    bottom: 0;

    ul {
      li {
        span {
          font-size: 12px;
          display: block;

          &:nth-child(1) {
            line-height: 1;
            margin-left: 4px;
          }
        }

        .ipt {
          height: 20px;
          border-bottom: #333 solid 1px;
          width: 125px;
          margin-left: 95px;
          margin-bottom: 10px;
          font-weight: bold;
        }
      }
    }
  }
}

.radio-image {
  //background: url("../../../../assets/images/capex/r1.png") center center no-repeat;
  //background-size: 14px 14px;
  //width: 14px;
  //height: 14px;
  img{
    width: 14px;
  }

  //&.active {
  //  background: url("../../../../assets/images/capex/r.png") center center no-repeat;
  //  background-size: 14px 14px;
  //}
}

.c-text {
  font-size: 12px;
  font-weight: 600;
}

.money-wrap {
  .money-type {
    border: #000000 solid 2px;
    padding: 1px 5px;
    width: 75px;
    display: inline-block;

    .radio-image {
      display: inline-block;
    }
  }
}

.my-content {
  display: inline-block;
  width: calc(100% - 80px);
  padding-left: 5px;
  vertical-align: top;

  .ctn-wrap {
    border-bottom: #000 solid 1px;

    ul {
      height: 22px;
      display: inline-block;

      li {
        width: 16px;
        height: 20px;
        display: inline-block;
        border-right: #000 solid 1px;
        border-top: #000 solid 1px;
        vertical-align: text-top;
        line-height: 20px;
        text-align: center;
        font-weight: bold;

        &:first-child {
          border-left: #000 solid 1px;
        }
      }
    }

    .p-t {
      display: inline-block;
      font-size: 12px;
      padding-left: 5px;
      vertical-align: bottom;
    }
  }

  .ipt {
    width: 50px;
    height: 18px;
    border: #000 solid 1px;
    display: inline-block;
    margin-left: 15px;
    margin-top: 7px;
  }

  .c-text {
    margin-left: 150px;
    vertical-align: top;
    position: relative;
    top: 8px;
  }
}

.dept-branch {
  font-size: 12px;

  .ipt {
    height: 20px;
    line-height: 20px;
    border-bottom: #000 solid 1px;
    font-weight: bold;
    font-size: 12px;
    width: 200px;
  }
}

.label {
  border: none !important;
}

.invoice-attached {
  //border: #000 solid 1px;
  .label {
    font-size: 12px;
    font-weight: bold;
    color: #000000;
    padding: 0;
  }

  td {
    border: #000 solid 2px;
    padding: 5px !important;
  }
}

.manager {
  .item {
    width: calc(100% / 3);
    display: inline-block;
  }
}

.manager1 {
  .item {
    width: calc(100% / 3);
    display: inline-block;

    &:first-child {
      width: calc(100% / 3 * 2);
    }
  }
}

.money-table {
  border-collapse: collapse;
  box-sizing: border-box;
  //display: table !important;
  float: left;

  td {
    box-sizing: border-box;
    border-collapse: collapse;
  }
}
</style>
